<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
</head>
<body>
<div class="login-wrap">
    <h2>登录</h2>
    <div class="form">
        <input type="text" placeholder="id" name="un" id="id"/>
        <input type="password" placeholder="密码" name="pw" id="password"/><br>
        <button onClick="save()"> 登录 </button>
    </div>
    <h2><a onClick="register()">注册</a><br></h2>
</div>
<script type="text/html" id="register">
    <div class="layui-field-box">
        <form class="layui-form">
            <div class="layui-form-item layui-form-pane">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-inline">
                    <input type="text" id="insert_username" class="layui-input" placeholder="请输入昵称">
                </div>
            </div>
            <div class="layui-form-item layui-form-pane">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="text" id="insert_password" class="layui-input" placeholder="请输入密码">
                </div>
            </div>
            <div class="layui-form-item layui-form-pane">
                <label class="layui-form-label">重复密码</label>
                <div class="layui-input-inline">
                    <input type="text" id="insert_passwordRepeat" class="layui-input" placeholder="请输入密码">
                </div>
            </div>
            <div class="layui-form-item layui-form-pane">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-inline">
                    <input type="radio" name="sex" class="layui-input" value="男" title="男" checked>
                    <input type="radio" name="sex" class="layui-input" value="女" title="女">
                </div>
            </div>
            <div class="layui-form-item layui-form-pane">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="text" id="insert_tel" class="layui-input" placeholder="请输入电话" lay-verify="phone">
                </div>
            </div>
            <div class="layui-form-item layui-form-pane">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" id="insert_email" class="layui-input" placeholder="请输入邮箱" lay-verify="email">
                </div>
            </div>
        </form>
    </div>
</script>
<script src="../../js/layui/layui.js"></script>
<script src="../../js/jquery/jquery-3.6.0.js"></script>
<script type="text/javascript" src="../../js/md5.js"></script>
<script>


    function register(){
        layui.use(['element', 'layer', 'util','laydate'], function() {
            var element = layui.element
                , layer = layui.layer
                , util = layui.util
                , $ = layui.$
                , laydate = layui.laydate;
        });
        layer.open({
            type: 1
            ,title: '注册' //不显示标题栏
            ,closeBtn: false
            ,area: ['400px','450px']  // 宽和高
            ,shade: 0.8
            ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
            ,btn: ['注册', '取消']
            ,btnAlign: 'c'
            ,moveType: 1 //拖拽模式，0或者1
            ,content: $('#register').html()         // 引入自定义表单
            ,btn1: function(index, layero){            // 这个是新增按钮点击事件
                let username = $("#insert_username").val();
                let password = $("#insert_password").val();
                let passwordRepeat = $("#insert_passwordRepeat").val();
                let sex = $("input[type=\"radio\"]").val();
                let tel = $("#insert_tel").val();
                let email = $("#insert_email").val();
                if(username === "" || username===null ||password!=passwordRepeat) {
                    layer.msg("填写错误");
                }
                else {
                    $.ajax({
                        url:"/user/insert",   // 请求路径
                        type:"post",            // 请求的方式，不区分大小写
                        cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                        contentType:"application/json;charset=utf-8",
                        data:JSON.stringify({
                            username:username,
                            password:calcMD5(password),
                            sex:sex,
                            tel:tel,
                            email:email
                        }),
                        datatype:"json",        // 返回类型，text文本、html页面、json数据
                        success:function(response){
                            console.log("返回: " + response);
                            layer.msg(response.msg);
                            if(response.code === 200) {
                                layer.close(index);
                                $("#id").val(response.data.user.id);
                            }
                        },
                        error:function(response){
                            console.log("出错返回: " + response);
                            console.log("出错数据: " + JSON.stringify(response));
                        }
                    });
                }
            }
            ,success: function(layero){
                    layui.use('form', function(){
                        var form = layui.form;

                    });
            }
        });
    }

    function save(){
        console.log(calcMD5($("#password").val()));
        if($("#id").val()===""||$("#password").val()===""||$("#id").val()===null||$("#password").val()===null)
            alert("请输入id和密码");
        else {
            $.ajax({
                type: "post",
                url: "http://localhost:8080/user/login",
                data: {
                    id: $("#id").val(),
                    password: calcMD5($("#password").val())
                },
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    if (data.code === 200)
                        window.location.href = "html/home/home.html";
                    else alert(data.msg);
                }
            });
        }
    }


</script>
</body>
</html>